<template>
  <page-header-wrapper>
    <JeepayCard
      ref="infoCard"
      :reqCardListFunc="reqCardListFunc"
      :span="vdata.jeepayCard.span"
      :height="vdata.jeepayCard.height"
      :name="vdata.jeepayCard.name"
      :addAuthority="vdata.jeepayCard.addAuthority"
      @addJeepayCard="addOrEdit(null, false)"
    >
      <template #cardContentSlot="{record}">
        <!-- 右键菜单, 判断条件： 不包含_ 比如： wxpay_1 本身就是被复制的渠道了， 不支持再次复制了。   -->
        <a-dropdown :trigger="['contextmenu']">
          <template v-if="$access('ENT_PC_IF_DEFINE_EDIT') && record.ifCode.indexOf('_') < 0 && /^(.+)pay$/.test(record.ifCode)" #overlay>
            <a-menu>
              <a-menu-item key="1" @click="addOrEdit(record.ifCode, true)">克隆该接口</a-menu-item>
              <a-menu-item key="2" @click="syncConfigInfo2CloneIfCodes(record)">同步到所有副本</a-menu-item>
            </a-menu>
          </template>


          <div :style="{'height': vdata.jeepayCard.height + 'px'}" class="jeepay-card-content">
            <!-- 卡片自定义样式 -->
            <div class="jeepay-card-content-header" :style="{backgroundColor: record.bgColor, height: vdata.jeepayCard.height/2 + 'px'}">
              <img v-if="record.icon" :src="record.icon" :style="{height: vdata.jeepayCard.height/5 + 'px'}">
            </div>
            <div class="jeepay-card-content-body" :style="{height: (vdata.jeepayCard.height/2 - 50) + 'px'}">
              <div class="title">
                {{ record.ifName }}
              </div>
            </div>
            <!-- 卡片底部操作栏 -->
            <div class="jeepay-card-ops">
              <a-tooltip v-if="$access('ENT_PC_IF_DEFINE_EDIT')" placement="top" title="编辑">
                <edit-outlined key="edit" type="edit" @click="addOrEdit(record.ifCode, false)" />
              </a-tooltip>
              <a-tooltip v-if="$access('ENT_PC_IF_DEFINE_DEL')" placement="top" title="删除">
                <!-- <a-icon key="delete" type="delete" @click="del(record.ifCode)" /> -->
                <delete-outlined key="delete" type="delete" @click="del(record.ifCode)" />
              </a-tooltip>
            </div>
          </div>
        </a-dropdown>
      </template>
    </JeepayCard>

    <!-- 新增页面组件  -->
    <PayIfDefineAddOrEdit ref="payIfDefineAddOrEdit" :callbackFunc="refCardList" />
  </page-header-wrapper>
</template>

<script lang="ts" setup> 
import { API_URL_IFDEFINES_LIST, req, $syncConfigInfo2CloneIfCodes } from '@/api/manage'
import PayIfDefineAddOrEdit from './AddOrEdit.vue'
import {ref,reactive,getCurrentInstance} from 'vue'
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

    const infoCard = ref()
    const payIfDefineAddOrEdit =ref()
    const vdata = reactive ({
      jeepayCard: {
        name: '支付接口',
        height: 300,
        span: { xxl: 6, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 },
        addAuthority: $access('ENT_PC_IF_DEFINE_ADD')
      }
    })

    // 请求支付接口定义数据
  function  reqCardListFunc () {
      return req.list(API_URL_IFDEFINES_LIST,'')
    }
    // 刷新card列表
  function  refCardList () {
     infoCard.value.refCardList()
    }
   function addOrEdit (ifCode, isCloneMode) {
      payIfDefineAddOrEdit.value.show(ifCode, isCloneMode)
    }
   function del (ifCode) {
     
      $infoBox.confirmDanger('确认删除？', '', () => {
        req.delById(API_URL_IFDEFINES_LIST, ifCode).then(res => {
          $infoBox.message.success('删除成功！')
          refCardList()
        })
      })
    }

    function syncConfigInfo2CloneIfCodes(record) {
     
     $infoBox.confirmDanger('确认同步【'+record.ifName+'】的配置信息到所有副本？', '', () => {

      $syncConfigInfo2CloneIfCodes(record.ifCode).then(res => {
         $infoBox.message.success('同步完成！')
         refCardList()
       })
      
     })
   }
</script>

<style lang="less" scoped>
  .jeepay-card-content {
    width: 100%;
    position: relative;
    background-color: @jee-card-back;
    border-radius: 6px;
    overflow:hidden;
  }
  .jeepay-card-ops {
    width: 100%;
    height: 50px;
    background-color: @jee-card-back;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid @jee-back;
    position: absolute;
    bottom: 0;
  }
  .jeepay-card-content-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .jeepay-card-content-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .title {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 1px;
  }
</style>
